<template>
  <view
    class="product-box"
    @click="productClick(itemData)"
    :data-spmCntSuffix="spmSuffix"
    :data-spm="itemData"
    :data-custom="spmIndex"
  >
    <img
      v-if="itemData.cardContent.tagIconUrl"
      class="tag-icon"
      :style="{
        width: itemData.cardContent.tagIconStyle.width + 'rpx',
        height: itemData.cardContent.tagIconStyle.height + 'rpx',
      }"
      :src="itemData.cardContent.tagIconUrl"
    />
    <view class="tag-icon-box" :style="'background: '+tagColor" v-if="itemData.cardContent.cardTypeName">
      {{itemData.cardContent.cardTypeName}}
    </view>
    <img v-if="itemData.cardContent.rightTopTagIconUrl" class="play-icon" :src="itemData.cardContent.rightTopTagIconUrl" >
    <image
      class="product-img"
      :class="'product-img-' + itemData.cardContent.cardType"
      :src="itemData.cardContent.mainPictureUrl"
      mode="aspectFill"
    />
    <!-- 商圈 -->
    <view class="address-box" v-if="itemData.cardContent.commercialArea">
      <image
        class="address-icon"
        src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/home-address-icon.png"
        mode="scaleToFill"
      />
      <text class="address-text omit1">{{itemData.cardContent.commercialArea}}</text>
    </view>
    <!-- 日游x天x晚 -->
    <view class="address-box" v-if="itemData.cardContent.tourDuration">
      <text class="address-text omit1">{{itemData.cardContent.tourDuration}}</text>
    </view>
    <!-- 攻略关联POI -->
    <block v-if="itemData.cardContent.recPoiList && itemData.cardContent.recPoiList.length > 0">
      <view class="address-box" v-for="(poi, poiIndex) in itemData.cardContent.recPoiList" :key="poiIndex">
        <image
          class="address-icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/home-address-icon.png"
          mode="scaleToFill"
        />
        <text class="address-text omit1">
          {{poi.poiName}}
        </text>
      </view>
    </block>
    <view>
      <view class="product-title" v-if="itemData.cardContent.title ">{{ itemData.cardContent.title }}</view>
      <view class="tag-box" v-if="itemData.cardContent.tagList && itemData.cardContent.tagList.length > 0">
        <text class="omit1">
          <block v-for="(tag, index) in itemData.cardContent.tagList" :key="index">{{tag}}{{index !== 1 && index !== itemData.cardContent.tagList.length - 1 ? ' · ' : ''}}{{" "}}</block>
        </text>
      </view>
      <!-- 酒店信息 -->
      <view class="hotel-open-box" v-if="itemData.cardContent.openTime || itemData.cardContent.score">
        <view class="score-box" v-if="itemData.cardContent.score">
          <text class="score">{{itemData.cardContent.score}}</text>
          <text class="score sm">分</text>
        </view>
        <text class="open-text omit1" v-if="itemData.cardContent.openTime">{{itemData.cardContent.hotelLevel}} | {{itemData.cardContent.openTime}}</text>
      </view>
      <view class="price-box" v-if="itemData && itemData.cardContent && (itemData.cardContent.priceInfo || itemData.cardContent.sourceUrl || itemData.cardContent.tag || itemData.cardContent.buyNum)">
        <view class="left-flex">
          <viSioPrice
            v-if="itemData.cardContent.priceInfo"
            :priceModel="{
              curreny: itemData.cardContent.priceInfo.currency,
              descr: itemData.cardContent.priceInfo.description,
              price: itemData.cardContent.priceInfo.price,
            }"
          ></viSioPrice>
          <img
            :style="{
              width: itemData.cardContent.sourceStyle.width + 'rpx',
              height: itemData.cardContent.sourceStyle.height + 'rpx',
            }"
            v-if="itemData.cardContent.sourceUrl"
            :src="itemData.cardContent.sourceUrl"
          />
          <view
            style="color: #767697; font-size: 20rpx"
            v-if="itemData.cardContent.tag"
            >{{ itemData.cardContent.tag }}</view
          >
        </view>
        <view class="sale-number" v-if="itemData.cardContent.buyNum">{{
          itemData.cardContent.buyNum
        }}</view>
      </view>
      <!-- 门票榜单 -->
      <view
        class="top-box"
        v-if="itemData.cardContent.top"
        @click.stop="toAiPlay(itemData.actionClick.args)"
        :data-spmCntSuffix="'.selectionProduct.toAiPlay@'"
        :data-spm="itemData.cardContent.top"
        :data-custom="1"
      >
        <view class="top-view">
          <image
            class="top-icon"
            src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/home-top-cion.png"
            mode="scaleToFill"
          />
          <text class="top-text omit1">{{itemData.cardContent.top}}</text>
          <image
            class="right-icon"
            src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/home-top-right-cion.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import viSioPrice from "@/components/viSioPrice/index.vue";
export default {
  props: {
    itemData: {
      type: Object,
      default: {},
    },
    spmIndex: {
      type: Number,
      default: 1,
    },
    spmSuffix: {
      type: String,
      default: "",
    },
  },
  components: {
    viSioPrice,
  },
  computed: {
    tagColor() {
      switch (this.itemData?.cardContent?.cardType) {
        case 2:
          return "#BB7FFA";
        case 4:
          return "#6a92ff";
        default:
          return "#F8B840";
      }
    },
  },
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    productClick(item) {
      let actionType = item.actionClick.actionType; //点击操作类型 1 AI发, 2 用户发, 3 卡片, 4 跳转页面, 5 弹窗
      console.log(item)
      if (actionType == 1) {
        if (!this.$isLogin()) {
          return;
        }
        let txt = item.actionClick.message;
        uni.setStorageSync("askQuestion", {
          txt,
          type: 1,
        });
        uni.navigateTo({
          url: "/ai/pages/index",
        });
      }
      if (actionType == 2) {
        if (!this.$isLogin()) {
          return;
        }
        let txt = item.actionClick.message;
        uni.setStorageSync("askQuestion", {
          txt,
          sceneCode:item.actionClick.args.scene
        });
        uni.navigateTo({
          url: "/ai/pages/index",
        });
      }
      if (actionType == 3) {
      }
      if (actionType == 4) {
        this.toDetail(item);
      }
      if (actionType == 5) {
        this.$emit('itemClick', item)
      }
    },
    toDetail(item) {
      let args = item.actionClick.args;
      let cardType = item.cardContent.cardType;
      //商品
      if (cardType === 1) {
        this.$productUrlJump(args, true);
      }
      //攻略
      if (cardType === 2) {
        uni.navigateTo({
          url: '/ai/pages/aiSecretDetail/index?articleId=' + args.articleId + '&hiddenChange=true'
        })
      }
      //旅拍
      if (cardType === 3) {
        this.jumpAiPhoto(item);
      }
      //行程
      if (cardType === 4) {
      }
      // 行程定制卡片
      if (cardType === 5) {
      }
      //秒读攻略
      if (cardType === 6) {
      }
    },
    //旅拍根据返回跳转
    jumpAiPhoto(item) {
      let args = item.actionClick.args;
      let url = args.jumpAddress;
      let urlObj = {};
      switch (args.aigcType) {
        case 1: // 写真
          urlObj = {
            packageId: args.packageId,
            packageName: args.packageName,
          };
          break;
        case 2: // 造型
          urlObj = {
            packageId: args.packageId,
            packageName: args.packageName,
          };
          break;
        case 3: // Vlog
          urlObj = {
            selectIndex: args.selectIndex,
          };
          break;
        case 4: // 穿越
          urlObj = {
            sceneId: args.sceneId,
          };
          break;
        default:
          urlObj = {
            packageId: args.packageId,
            packageName: args.packageName,
            sceneId: args.sceneId,
            selectIndex: args.selectIndex,
          };
          break;
      }
      this.$navTo(url, urlObj, "navigateTo");
    },
    // 跳转到玩什么榜单
    toAiPlay(item) {
      this.$navTo(
        '/packageAI/pages/aiPlay/aiPlay',
        {poiId: item.poiId},
        'navigateTo'
      )
    },
  },
};
</script>

<style lang="scss" scoped>
.product-box {
  display: flex;
  flex-direction: column;
  width: 338rpx;
  margin-bottom: 18rpx;
  position: relative;
  background: #fff;
  border-radius: 26rpx;
  .tag-icon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .tag-icon-box {
    height: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 24rpx 0rpx 24rpx 0rpx;
    background: #F8B840;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 24rpx;
    padding: 0 20rpx;
  }
  .play-icon{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    z-index: 1;
    top: 20rpx;
    right: 20rpx;
  }
  .product-img {
    width: 338rpx;
    height: 338rpx;
    position: relative;
    border-radius: 26rpx;
    background: #d8d8d8;
  }
  .product-img-3,
  .product-img-4,
  .product-img-5,
  .product-img-6 {
    width: 338rpx;
    height: 451rpx;
  }
  .address-box {
    width: fit-content;
    max-width: calc(100% - 24rpx);
    display: flex;
    align-items: center;
    position: absolute;
    height: 40rpx;
    background: rgba(19, 19, 40, 0.3);
    border-radius: 20rpx;
    padding: 10rpx 12rpx;
    top: 286rpx;
    left: 12rpx;
    right: 12rpx;
    .address-icon {
      width: 20rpx;
      height: 20rpx;
      margin-right: 2rpx;
    }
    .address-text {
      flex: 1;
      font-size: 20rpx;
      color: #FFFFFF;
    }
  }
  .product-title {
    padding: 0 16rpx;
    margin: 18rpx 0;
    color: $sl-color-black;
    font-size: 28rpx;
    font-weight: 600;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 这里是超出几行省略 */
    overflow: hidden;
    word-break: break-word;
  }
  .tag-box {
    width: fit-content;
    margin: 0 16rpx 16rpx 16rpx;
    background: #FFFBF4;
    border-radius: 4rpx;
    padding: 8rpx 10rpx;
    font-size: 24rpx;
    color: #F18C34;
    line-height: 24rpx;
  }
  .hotel-open-box {
    display: flex;
    align-items: flex-end;
    margin: 0 17rpx 18rpx 17rpx;
    .score-box {
      .score {
        font-weight: 600;
        font-size: 28rpx;
        color: #4E78FF;
        line-height: 28rpx;
        &.sm {
          font-weight: 500;
          font-size: 20rpx;
          color: #4E78FF;
          line-height: 20rpx;
          margin: 0 0 2rpx 2rpx;
        }
      }
    }
    .open-text {
      flex: 1;
      font-size: 20rpx;
      color: #767697;
      margin-left: 10rpx;
      margin-bottom: 2rpx;
    }
  }

  .price-box {
    padding: 0 16rpx;
    padding-bottom: 18rpx;
    display: flex;
    align-items: baseline;
    // justify-content: space-between;

    .left-flex {
      display: flex;
      align-items: center;

      .tag-box {
        height: 28rpx;
        font-size: 20rpx;
        background: #fff2ec;
        color: $sl-color-price;
        margin-left: 7rpx;
        padding: 0 6rpx;
      }
    }

    .sale-number {
      font-size: 20rpx;
      color: $sl-color-light-grey;
      margin-left: 10rpx;
    }
  }
  .top-box {
    border-top: 1rpx solid #EEEEEE;
    margin: 0 16rpx;
    .top-view {
      display: flex;
      align-items: center;
      height: 40rpx;
      background: linear-gradient( 223deg, rgba(254, 238, 223, 0.5) 0%, rgba(247, 213, 185, 0.5) 100%);
      border-radius: 20rpx;
      padding: 0 10rpx;
      margin: 14rpx 0;
      width: fit-content;
    }
    .top-icon {
      width: 24rpx;
      height: 24rpx;
    }
    .top-text {
      font-weight: 600;
      font-size: 24rpx;
      color: #803309;
      line-height: 24rpx;
      margin-left: 2rpx;
      flex: 1;
    }
    .right-icon {
      width: 24rpx;
      height: 24rpx;
      margin-left: 12rpx;
    }
  }
}
</style>
